<template>
    <el-container style="height:100vh;font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;">
        <!-- 头部样式优化 -->
        <el-header style="background-color:#409EFF;color: #fff;height: 60px;box-shadow: 0 2px 12px rgba(0,0,0,0.1);">
            <div style="padding-top: 12px; display: flex; justify-content: space-between; align-items: center;">
                <span style="font-size: 22px;font-weight: 600;letter-spacing: 1px;">
                    <i class="el-icon-s-shop" style="margin-right: 8px;"></i>店铺管理后台
                </span>
                <el-rate
                    v-model="shopInfo.score"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value} points"
                    size="large"
                />
                <div style="display: flex; align-items: center;gap:15px;">
                    <!-- 店铺名称 -->
                    <el-tag v-if="shopInfo.shopname" type="success" effect="dark" style="font-size: 15px;">
                        {{ shopInfo.shopname }}
                    </el-tag>
                    <!-- 营业状态 -->
                    <el-switch

                        v-model="shopState"
                        :active-value="0"
                        :inactive-value="1"
                        active-text="营业中"
                        inactive-text="已打样"
                        active-color="#909399"
                        inactive-color="#13ce66"
                        @change="updateState"
                        style="--el-switch-on-color: #13ce66; height:28px;"
                    />
                </div>
            </div>
        </el-header>

        <el-container>
            <!-- 侧边栏优化 -->
            <el-aside style="width: 200px;background-color: #fff;border-right: 1px solid #e6e6e6;">
                <el-scrollbar>
                    <el-row>
                        <el-col id="photoPanel" style="padding: 20px 10px 10px;">
                            <div style="position:relative;display:flex;justify-content:center;">
                                <el-avatar :size="58" :src="shopPicture"
                                           style="border: 2px solid #fff; box-shadow: 0 0 8px rgba(0,0,0,0.15);"/>
                                <div style="position:absolute;right:6px;bottom:-3px;width:14px;height:14px;background:#4CAF50;
                                    border-radius:50%;border:2px solid #fff;"></div>
                            </div>
                            <div style="text-align: center; margin-top: 15px;margin-bottom:8px;">
                                <span style="font-weight:600;font-size:16px;color:#333;display:inline-block;max-width:170px;
                                    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                    {{ shopInfo.shopname }}
                                </span>
                            </div>
                            <el-divider style="margin: 12px 0;"/>
                        </el-col>
                    </el-row>
                    <el-menu
                        default-active="/shop/dishes"
                        :router="true"
                        background-color="#fff"
                        text-color="#606266"
                        active-text-color="#409EFF"
                        style="border-right:none;"
                    >
                        <!-- 菜单项图标和样式优化 -->
                        <el-menu-item index="/shop/dishes">
                            <el-icon><Menu style="font-size: 18px;" /></el-icon>
                            <span>菜品管理</span>
                        </el-menu-item>

                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon><Tickets style="font-size: 18px;" /></el-icon>
                                <span>订单处理</span>
                            </template>
                            <el-menu-item index="/shop/ordering">
                                <el-icon><DocumentAdd style="font-size: 16px;" /></el-icon>
                                <span>进行中订单</span>
                            </el-menu-item>
                            <el-menu-item index="/shop/completed">
                                <el-icon><Notebook style="font-size: 16px;" /></el-icon>
                                <span>历史订单</span>
                            </el-menu-item>
                        </el-sub-menu>

                        <el-sub-menu index="3">
                            <template #title>
                                <el-icon><DataAnalysis style="font-size: 18px;" /></el-icon>
                                <span>经营数据</span>
                            </template>
                            <el-menu-item index="/shop/income">
                                <el-icon><PieChart style="font-size: 16px;" /></el-icon>
                                <span>总收入分析</span>
                            </el-menu-item>
                            <el-menu-item index="/shop/incomeDay">
                                <el-icon><DataLine style="font-size: 16px;" /></el-icon>
                                <span>每日分析</span>
                            </el-menu-item>
                        </el-sub-menu>

                        <el-sub-menu index="4">
                            <template #title>
                                <el-icon><Setting style="font-size: 18px;" /></el-icon>
                                <span>系统设置</span>
                            </template>
                            <el-menu-item index="/shop/set">
                                <el-icon><User style="font-size: 16px;" /></el-icon>
                                <span>店铺信息</span>
                            </el-menu-item>
                            <el-menu-item index="/config">
                                <el-icon><Tools style="font-size: 16px;" /></el-icon>
                                <span>系统设置</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-menu-item index="/multilogin">
                          <el-icon><Back style="font-size: 16px;"/></el-icon>
                          <span>退出登录</span>
                        </el-menu-item>
                    </el-menu>
                </el-scrollbar>
            </el-aside>

            <!-- 主内容区 -->
            <el-main style="background:#f5f7fa;padding:0;">
                <div style="background:#fff;padding:20px;min-height:100%;">
                    <router-view></router-view>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup lang="ts">
import {ref, onMounted, watch, nextTick} from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';
import {ElMessage} from "element-plus";
import storage from '../../storage.ts';
import UpdatePage from './settingPages/UpdatePage.vue';
import {Setting} from "@element-plus/icons-vue"; // 路径需正确


// 响应式变量：店铺信息
const shopInfo = ref({
    id: '',
    shopname: '',
    state: '',
    picture: '',
    address: '',
    phone: '',
    pwd: '',
    score: '',
});

// 响应式变量：营业状态
const shopState = ref(1);
const shopPicture = ref('');

// 获取当前路由实例
const route = useRoute();

const user = ref();
// 初始化时获取店铺信息
onMounted(async () => {

    user.value=storage.getUser();
    storage.removeUser();

    try {
        // 优先从路由参数中获取店铺ID
        const shopId = route.query.id;
        if (shopId) {
            // 调用后端接口获取店铺信息
            const { data } = await axios.get(`/api/shop/${shopId}`);
            shopInfo.value = data;
            shopInfo.value.score=shopInfo.value.score.substring(0, 4);
            shopState.value = data.state; // 同步营业状态
            shopPicture.value ="http://localhost:8081"+ data.picture;
            console.log(shopPicture);


        } else {
            // 如果没有路由参数，则尝试从localStorage中获取
            const storedShopInfo = localStorage.getItem('shopInfo');
            if (storedShopInfo) {
                shopInfo.value = JSON.parse(storedShopInfo);
                shopState.value = shopInfo.value.state; // 同步营业状态
                shopPicture.value ="http://localhost:8081"+ shopInfo.value.picture;
                console.log(shopPicture);
            }
        }
    } catch (error) {
        console.error('获取店铺信息失败:', error);
    }
});
const updateState = async (shopState) => {
    try {
        await axios.put('/api/shop', { id: shopInfo.value.id, state: shopState });
        ElMessage.success('营业状态更新成功');
    } catch (error) {
        console.error('更新营业状态失败:', error);
        ElMessage.error('更新营业状态失败');
    }
};


</script>

<style scoped>
#photoPanel {
    padding-top: 10px;
    text-align: center;
}

/* 菜单项悬停效果 */
.el-menu-item:hover {
    background-color: #ecf5ff !important;
    border-radius: 4px;
    margin: 4px 8px;
}

/* 激活菜单项样式 */
.el-menu-item.is-active {
    background-color: #e8f4ff !important;
    font-weight: 600;
    border-radius: 4px;
    margin: 4px 8px;
    position: relative;
}

.el-menu-item.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    width: 4px;
    background: #409EFF;
    border-radius: 2px;
}

/* 主内容卡片样式 */
.el-main > div {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
</style>